<template>
    <div class="app-container">

        <el-card class="box-card">
        <el-form label-position="left" label-width="80px" ref="form" :model="form" :rules="rules">
            <el-tabs v-model="activeName">
                <el-tab-pane label="基础设置" name="1">
                    <el-form-item label="商品分类" prop="cate_id">
                        <el-cascader
                            class="content_width"
                            v-model="form.cate_id"
                            size="small"
                            :options="cateTreeLists"
                            :props="treeProps"
                            clearable
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="商品编码" >
                        <el-input v-model="form.goods_no" placeholder="请输入商品编码"/>
                    </el-form-item>
                    <el-form-item label="商品名称"  prop="goods_name">
                        <el-input v-model="form.goods_name" placeholder="请输入商品名称"/>
                    </el-form-item>
                    <el-form-item label="单位"  prop="unit">
                        <el-input v-model="form.unit" placeholder="请输入商品单位"/>
                    </el-form-item>
                    <el-form-item label="商品图" prop="slider_image" style="margin-bottom:0">
                        <ul class="img-list">
                            <li v-for="item,index in form.slider_image">
                                <img :src="item" width="58px" height="58px" alt="图片">
                                <div class="img-tools">
                                    <i class="el-icon-delete" style="font-size: 14px;color: #fff" @click="removeSlider(index)"></i>
                                </div>
                            </li>
                            <li>
                                <div class="addImg" @click="showImage">
                                    <i class="el-icon-plus"></i>
                                </div>
                            </li>
                        </ul>
                        <p style="color: #999;font-size: 12px">建议尺寸：800*800，可拖拽改变图片顺序，默认首张图为主图，最多上传8张</p>
                    </el-form-item>

                    <el-form-item label="是否上架" prop="is_show">
                        <el-radio v-model="form.is_show" label="1">上架</el-radio>
                        <el-radio v-model="form.is_show" label="2">下架</el-radio>
                    </el-form-item>

                    <el-form-item label="商品标签" prop="label_id">

                        <el-button size="mini"   @click="addLabel()">选择标签</el-button>

                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="next" size="small">下一步</el-button>
                        <el-button type="primary" @click="saveGoods" size="small" v-if="form.goods_id > 0">保存
                        </el-button>
                    </el-form-item>

                </el-tab-pane>
                <el-tab-pane label="规格库存" name="2">
                    <el-form-item label="商品规格" prop="spec_type">
                        <el-radio v-model="form.spec_type" label="1">单规格</el-radio>
                        <el-radio v-model="form.spec_type" label="2">多规格</el-radio>

                    </el-form-item>
                    <div v-if="form.spec_type == 1">
                        <el-form-item label="售价">
                            <el-input type="number" v-model="form.price" style="width:500px" /> 元
                        </el-form-item>
                        <el-form-item label="划线价">
                            <el-input type="number" v-model="form.original_price" style="width:500px" /> 元
                        </el-form-item>
                        <el-form-item label="水卡抵扣">
                            <el-input type="number" v-model="form.card_price" style="width:500px" /> 元
                        </el-form-item>
                        <el-form-item label="成本价">
                            <el-input type="number" v-model="form.cost_price" style="width:500px" /> 元
                        </el-form-item>
                        <el-form-item label="库存">
                            <el-input type="number" v-model="form.stock" style="width:500px" />
                        </el-form-item>
                        <el-form-item label="商品编号">
                            <el-input type="number" v-model="form.spu" style="width:500px" />
                        </el-form-item>
                        <el-form-item label="重量">
                            <el-input type="number" v-model="form.weight" style="width:500px" /> KG
                        </el-form-item>
                        <el-form-item label="体积">
                            <el-input type="number" v-model="form.volume" style="width:500px" /> m³
                        </el-form-item>
                    </div>
                    <div style="margin-bottom: 20px" v-else>
                        <el-form-item label="选择规格">
                            <el-select v-model="selectRuleList" placeholder="请选择" clearable style="width: 300px" @change="handleSelectRule" size="small">
                                <el-option v-for="(item, index) in goodsRuleLists" :value="item.id" :key="index" :label="item.rule_name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!--            规格属性  -->
                        <el-form-item v-if="rule_attrs.length !== 0">
                            <draggable class="dragArea list-group" :list="rule_attrs" group="peoples" handle=".move-icon" :move="checkMove" @end="end">
                                <div v-for="(item, index) in rule_attrs" :key="index" class="acea-row row-middle mb10">
                                    <div class="move-icon">
                                        <span class="iconfont icondrag2"></span>
                                    </div>
                                    <div style="width: 90%" :class="moveIndex === index ? 'borderStyle' : ''">
                                        <div class="acea-row row-middle">
                                            <span class="mr5">{{ item.value }}</span>
                                            <i size="14" class="curs el-icon-error"  @click="handleRemoveRole(index)" />
                                        </div>
                                        <div class="rulesBox">
                                            <draggable class="item" :list="item.detail" handle=".drag">
                                                <el-tag closable color="primary" v-for="(j, indexn) in item.detail" :key="indexn" class="mr20 drag" @close="handleRemove2(item.detail, indexn)">{{ j }}</el-tag>
                                            </draggable>
                                            <el-input placeholder="请输入属性名称" v-model="item.detail.attrs_val" @keyup.enter.native="createAttr(item.detail.attrs_val, index)" style="width: 190px">
                                                <template slot="append">
                                                    <el-button type="primary"  @click="createAttr(item.detail.attrs_val, index)">属性添加</el-button>
                                                </template>
                                            </el-input>
                                        </div>
                                    </div>
                                </div>
                            </draggable>
                        </el-form-item>
                        <el-form-item v-if="createBnt">
                            <el-button type="primary"  @click="addRule">添加新规格</el-button>
                            <el-button type="success"  @click="makeRule(1)">立即生成</el-button>
                        </el-form-item>

                        <!--  添加 规格  -->
                        <el-col :span="24" v-if="showIput">
                            <el-col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                                <el-form-item label="规格：">
                                    <el-input placeholder="请输入规格" v-model="form.attrs_name" />
                                </el-form-item>
                            </el-col>
                            <el-col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                                <el-form-item label="规格值：">
                                    <el-input v-model="form.attrs_val" placeholder="请输入规格值" />
                                </el-form-item>
                            </el-col>
                            <el-col :xl="6" :lg="5" :md="10" :sm="24" :xs="24">
                                <div class="df-n-warp">
                                    <el-button type="primary"  @click="createAttrName">规格确定</el-button>
                                    <el-button  @click="offAttrName">取消</el-button>
                                </div>
                            </el-col>
                        </el-col>
                        <div class="table-box">
                            <div v-if="rule_extend.length > 0">
                                <el-form-item label="批量设置" style="margin-top: 10px">
                                    <el-button-group>
                                        <el-button type="primary" size="mini" @click="batchDialogVisible = true">图片</el-button>
                                        <el-button type="primary" size="mini" @click="setBatch('price', '售价')">售价</el-button>
                                        <el-button type="primary" size="mini" @click="setBatch('card_price', '水卡抵扣')">水卡抵扣</el-button>
                                        <el-button type="primary" size="mini" @click="setBatch('cost_price', '成本价')">成本价</el-button>
                                        <el-button type="primary" size="mini" @click="setBatch('original_price', '原价')">原价</el-button>
                                        <el-button type="primary" size="mini" @click="setBatch('stock', '库存')">库存</el-button>
                                        <el-button type="primary" size="mini" @click="setBatch('spu', '商品编号')">商品编号</el-button>
                                        <el-button type="primary" size="mini" @click="setBatch('weight', '重量')">重量</el-button>
                                        <el-button type="primary" size="mini" @click="setBatch('volume', '体积')">体积</el-button>
                                    </el-button-group>
                                </el-form-item>
                                <el-table :data="rule_extend" border style="width: 100%">
                                    <el-table-column v-for="(item,index) in tableHead" :label="item.label" width="150" :key="index">
                                        <template slot-scope="{row}">
                                            {{ row.sku[item.property] }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="图片"
                                        width="100">
                                        <template slot-scope="scope">
                                            <div class="up-item-img" v-if="scope.row.image == ''" @click="setOneImg(scope.$index)"><i class="el-icon-plus"></i></div>
                                            <img style="width: 50px; height: 45px" :src="scope.row.image" v-if="scope.row.image">
                                            <div class="img-tools" v-if="scope.row.image" @click="rmImg(scope.$index)"><i class="el-icon-delete" style="font-size: 14px; color: rgb(255, 255, 255);"></i></div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="售价" width="150">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.price" type="number"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="成本价" width="150">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.cost_price" type="number"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="水卡抵扣" width="150">
                                        <template slot-scope="{row}">
                                            <el-input v-model="row.card_price" type="number"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="原价" width="150">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.original_price" type="number"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="库存" width="150">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.stock" type="number"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="商品编号" width="150">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.spu"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="重量(KG)" width="150">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.weight" type="number"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="体积(m³)" width="150">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.volume" type="number"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" fixed="right" width="150">
                                        <template slot-scope="scope">
                                            <el-button @click="handleDel(scope.$index)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>

                    <el-form-item style="margin-top: 10px">
                        <el-button @click="pre" size="small">上一步</el-button>
                        <el-button type="primary" @click="ruleNext" size="small">下一步</el-button>
                        <el-button type="primary" @click="saveGoods" size="small" v-if="form.goods_id > 0">保存
                        </el-button>
                    </el-form-item>

                </el-tab-pane>

                <el-tab-pane label="商品详情" name="3">
                    <el-row  >
                        <el-col :span="16">
                            <el-form-item label="商品详情：">
                                <WangEditor style="width: 100%" :content="goods_contents" @editorContent="getEditorContent"></WangEditor>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="width: 33%">
                            <div class="ifam">
                                <div class="content" v-html="goods_contents"></div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" @click="next" size="small">下一步</el-button>
                        <el-button type="primary" @click="saveGoods" size="small" v-if="form.goods_id > 0">保存
                        </el-button>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="物流配置" name="4">
                    <div style="margin-top: 10px;margin-left: 80px">
                        <el-button @click="pre" size="small">上一步</el-button>
                        <el-button type="primary" @click="next" size="small">下一步</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="其他设置" name="5">
                    <el-form-item label="seo描述">
                        <el-input type="textarea" v-model="form.seo_desc" style="width: 500px"></el-input>
                    </el-form-item>

                    <el-form-item label="商品推荐">
                        <el-checkbox true-label="1" false-label="2" v-model="form.is_hot">热卖</el-checkbox>
                        <el-checkbox true-label="1" false-label="2" v-model="form.is_recommend">推荐</el-checkbox>
                        <el-checkbox true-label="1" false-label="2" v-model="form.is_new">新品</el-checkbox>
                    </el-form-item>

                    <div style="margin-top: 10px;margin-left: 80px">
                        <el-button @click="pre" size="small">上一步</el-button>
                        <el-button type="primary" @click="saveGoods" size="small">保存</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <el-dialog :title="`设置${batchTitle}`" :visible.sync="batchVisible" width="500px">
                <el-form :model="batchForm" label-width="80px">
                    <el-form-item :label="batchTitle">
                        <el-input v-model="batchForm.field" autocomplete="off" v-if="batchTitle == '商品编号'"></el-input>
                        <el-input v-model="batchForm.field" autocomplete="off" type="number" v-else></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="batchVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="batchFormSubmit" size="small">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="图片库" :visible.sync="dialogVisible" width="1200px" class="image-check-dialog">
                <file-select v-if="show_files" ref="file" :batch_select="true" :limit="10" @handleSubmit="selectedImg" />
            </el-dialog>
            <el-dialog title="图片库" :visible.sync="batchDialogVisible" width="1200px" class="image-check-dialog">
                <file-select v-if="show_files" ref="file" :batch_select="false" :limit="1" @handleSubmit="selectedBatchImg" />
            </el-dialog>
            <el-dialog title="标签" :visible.sync="dialogLabelVisible" width="1200px" class="image-check-dialog">


                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="batchLabelFormSubmit" size="small">确 定</el-button>
                </div>
            </el-dialog>
        </el-form>
        </el-card>
    </div>
</template>

<script>
import waves from '@/directive/waves';
import draggable from '@/directive/draggable';
import FileSelect from '@/components/FileSelect'
import PanThumb from '@/components/PanThumb'

import MarkdownEditor from '@/components/MarkdownEditor'
import WangEditor from '@/components/wangEditor/index.vue'


import {createGoods, updateGoods, detailGoods} from "@/api/grzq/mall/goods";
import {getCateSelectTreelists} from "@/api/grzq/mall/category";
import {getGoodsRuleSelectlists} from "@/api/grzq/mall/goods_rule";
import {getUploadOssSign,ossUpload} from "@/api/common";
import {getGoodsLabelSelectlists} from "@/api/grzq/mall/goods_label";

export default {
    name: 'articleManage',
    dicts: ['sys_yes_no'],
    components: {
        PanThumb,
        FileSelect,
        MarkdownEditor,
        WangEditor
    },
    directives: {draggable},
    filters: {},

    data() {
        return {
            activeName: '1',
            cateTreeLists: [],// 分类
            goodsRuleLists: [],//
            goodsLabelLists: [],//
            treeProps: {
                value: 'cate_id',
                label: 'cate_title',
                children: 'child',
                checkStrictly: true
            },
            cateId: [],
            tableHead: [],
            ruleTableItem: {
                sku: [],
                image: '',
                price: '0.00',
                card_price: '0.00',
                cost_price: '0.00',
                original_price: '0.00',
                stock: 0,
                spu: '',
                weight: '0.00',
                volume: '0.00'
            },
            selectRuleList:[],
            form: {
                cate_id: '0',
                goods_id: undefined,
                goods_no: undefined,
                goods_name: undefined,
                slider_image: [],
                spec_type:'1',
                is_show:'1',
                rule_extend: [],
            },
            goods_id: '',
            batchTitle: '',
            batchVisible: false,
            setField: '',
            batchForm: {
                field: ''
            },
            rules: {
                cate_id: [
                    {required: true, message: '请选择商品分类', trigger: 'blur'}
                ],
                goods_name: [
                    { required: true, message: "请输入商品名称", trigger: "blur" }
                ],
                 unit: [
                    {required: true, message: '请输入单位', trigger: 'blur'}
                ],
                // slider_image: [
                //     {required: true, message: '请请选择商品图', trigger: 'blur'}
                // ],
                is_show: [
                    {required: true, message: '请选择是否上架', trigger: 'blur'}
                ],
                spec_type: [
                    {required: true, message: '请选择规格', trigger: 'blur'}
                ]
            },
            /*------------------*/
            rule_attrs: [],
            rule_extend: [],
            templateList: [],
            createBnt: true,
            showIput: false,
            manyFormValidate: [],
            moveIndex:"",
            goods_contents:"",
            file:null,
            /**--  图片  ---*/
            // 图片上传
            dialogVisible: false,//  单
            batchDialogVisible: false, // 多


            selectImgIndex: -1,
            upload_url: '',
            show_files: false,
            slider_limit:8,
            batch_select:false,
            dialogLabelVisible:false,
        }
    },
    async created() {
        await this.getCateTreeList()
        await this.getGoodsRuleList()
        await this.getGoodsLabelList()
        this.goods_id = this.$route.query && this.$route.query.id;
        if ( this.goods_id!=0) {
            await this.baseGoodsInfo(this.goods_id)
        }
    },
    methods: {
        // 单个商品 信息
        async baseGoodsInfo(goods_id){
            const { data } = await detailGoods(goods_id);
            console.log("data",data)
            this.form = data.info
            this.form.spec_type = data.info.spec_type.toString()
            this.form.is_new = data.info.is_new.toString()
            this.form.is_hot = data.info.is_hot.toString()
            this.form.is_show = data.info.is_show.toString()
            this.form.is_recommend = data.info.is_recommend.toString()
            this.rule_attrs = data.rule_info
            this.rule_extend = data.rule_extend;
            this.goods_contents = data.info.goods_contents;

            console.log("this.form",this.form)
            console.log("this.rule_attrs",this.rule_attrs)
            console.log("this.rule_extend",this.rule_extend)

            let titleMap = [];
            let preList = [];
            let rule_attrs = this.rule_attrs
            console.log("rule_attrs",rule_attrs)
            console.log("this.rule_extend",this.rule_extend)

            this.rule_attrs.forEach((item, index) => {
                let data = item.detail.filter(function (s) {
                    return s && s.trim();
                })
                if (item.value != '' && data.length > 0) {
                    titleMap.push({label: item.value, property: index})
                    preList.push(item.detail)
                }
            })

            this.tableHead = titleMap
            this.rule_extend.map(item => {
                return item.sku = item.sku.split(',')
            })
        },
        // 分类
        async getCateTreeList(){
            const {data} = await getCateSelectTreelists();
            console.log("data",data)
            this.cateTreeLists = data;
        },
        // 规格
        async getGoodsRuleList(){
            const {data} = await getGoodsRuleSelectlists();
            console.log("data",data)
            this.goodsRuleLists = data;
        },
        // 规格
        async getGoodsLabelList(){
            const {data} = await getGoodsLabelSelectlists();
            console.log("data",data)
            this.goodsLabelLists = data;
        },
        // 保存
        saveGoods(){
            // console.log(this.form)
            // // 去除空值
            this.form.goods_content = this.goods_contents
            this.form.rule_attrs = this.rule_attrs
            this.form.rule_extend = this.rule_extend

            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.goods_id != undefined) {
                        updateGoods(this.trimSpace(this.form)).then(response => {
                            this.msgSuccess('修改成功')
                        })
                    } else {
                        createGoods(this.trimSpace(this.form)).then(response => {
                            this.msgSuccess('新增成功')
                            this.goBack()
                        })
                    }
                }
            })
        },
        // 下一步
        next() {
            if (this.form.type == 2 && this.activeName == 3) {
                this.activeName = (parseInt(this.activeName) + 2) + ''
            } else {
                this.activeName = (parseInt(this.activeName) + 1) + ''
            }
        },
        // 上一步
        pre() {
            if (this.form.type == 2 && this.activeName == 5) {
                this.activeName = (parseInt(this.activeName) - 2) + ''
            } else {
                this.activeName = (parseInt(this.activeName) - 1) + ''
            }
        },
        // 选择规则里面的下一步
        ruleNext() {
            if (this.form.spec_type == 2 && this.rule_extend.length == 0) {
                this.$message.error('请生成多规格属性！')
                return false;
            }
            this.activeName = (parseInt(this.activeName) + 1) + ''
        },
        // 标签
        addLabel() {
            this.dialogLabelVisible = true
        },
        // 标签
        batchLabelFormSubmit(img) {
            this.dialogLabelVisible = true
        },




        /*---------图片------------------*/


        // 选择图（多张图）
        showImage() {
            this.dialogVisible = true
            this.show_files = true
        },

        //选择图  选择单个图片
        setOneImg(index) {
            this.batchDialogVisible = true
            this.show_files = true
            this.selectImgIndex = index
        },
        // 选择了图片 （多张图）
        selectedImg(item) {
            if ((this.form.slider_image.length + item.length) > this.slider_limit) {
                this.$message.error('您还可以选择' + (this.slider_limit - parseInt((this.form.slider_image.length + item.length))) + '张商品图')
                return false;
            }
            item.forEach(vo => {
                this.form.slider_image.push(vo.file_url)
            })
            this.dialogVisible = false
        },

        // 批量设置图片  （ 单个图）
        selectedBatchImg(img){

            console.log("img",img)
            let that = this;
            if (parseInt(this.selectImgIndex) >= 0) {
                this.rule_extend[parseInt(this.selectImgIndex)].image = img.file_url
                this.selectImgIndex = -1
            } else {
                this.rule_extend.map(item => {
                    item.image = img.file_url
                })
            }
            this.batchDialogVisible = false
        },
        // 删过单个图片
        rmImg(index) {
            this.rule_extend[parseInt(index)].image = ''
        },


        // 删除图片
        removeSlider(index) {
            this.form.slider_image.splice(index, 1)
        },


        /*---------图片  end ------------------*/


        // ====规格----------
        // 删除规格
        delItem(tableIndex, index) {
            this.rule_extend[tableIndex].item.splice(index, 1);
            this.makeRule() // 重新生成规格
        },

        // 删除规格标题
        delTitle(index) {
            this.rule_extend.splice(index, 1);
            this.makeRule() // 重新生成规格
        },
        // 添加新的节点
        addNewItem(index) {
            this.rule_extend[index].item.push('');
        },
        // 计算笛卡尔积
        calcDescartes(array) {
            if (array.length < 2) return array[0] || [];
            return array.reduce((total, currentValue) => {
                let res = [];
                total.forEach(t => {
                    currentValue.forEach(cv => {
                        if (t instanceof Array) 	// 或者使用 Array.isArray(t)
                            res.push([...t, cv]);
                        else
                            res.push([t, cv]);
                    })
                })
                return res;
            })
        },
        // 批量设置
        setBatch(field, title) {
            this.batchTitle = title
            this.batchVisible = true
            this.setField = field
        },
        // 批量设置
        batchFormSubmit() {
            if (this.batchForm.field == '') {
                this.$message.error('请输入正确的值')
                return false
            }

            this.rule_extend.map(item => {
                if (this.setField != 'stock' && this.setField != 'spu') {
                    item[this.setField] = Number(this.batchForm.field).toFixed(2)
                } else {
                    item[this.setField] = this.batchForm.field
                }
            })

            this.batchForm.field = ''
            this.batchVisible = false
        },
        // 选择预设的规格
        handleSelectRule(ruleId) {
            console.log(ruleId)
            let that = this;
            that.goodsRuleLists.forEach(function (item, index) {
                if (item.id === ruleId) {
                    that.rule_attrs = item.rule_value;
                }
            });
        },
        // 生成规则
        makeRule() {
            let titleMap = [];
            let preList = [];
            let rule_attrs = this.rule_attrs
            console.log("rule_attrs",rule_attrs)
            console.log("this.rule_extend",this.rule_extend)

            this.rule_attrs.forEach((item, index) => {
                let data = item.detail.filter(function (s) {
                    return s && s.trim();
                })
                if (item.value != '' && data.length > 0) {
                    titleMap.push({label: item.value, property: index})
                    preList.push(item.detail)
                }
            })

            console.log("preList",preList)

            let descartes = this.calcDescartes(preList)
            this.rule_extend = [];
            this.ruleTableItem = {
                sku: [],
                image: '',
                price: '0.00',
                card_price: '0.00',
                cost_price: '0.00',
                original_price: '0.00',
                stock: 0,
                spu: '',
                weight: '0.00',
                volume: '0.00'
            };
            descartes.forEach(item => {
                if (item instanceof Array) {
                    let len = item.length;
                    item.forEach((vo, index) => {
                        if (!vo) {
                            item.splice(index, 1)
                        }
                    })

                    if (len != item.length) {
                        return;
                    }
                } else if (item == '') {
                    return;
                }

                this.ruleTableItem.sku = (item instanceof Array) ? item : [item]
                let tableIem = JSON.parse(JSON.stringify(this.ruleTableItem))

                this.rule_extend.push(tableIem)
            })
            this.tableHead = titleMap
        },
/*----------------------------------*/
        // 添加按钮
        addRule() {
            this.clearAttr();
            this.createBnt = false;
            this.showIput = true;
        },

        // 取消
        offAttrName() {
            this.showIput = false;
            this.createBnt = true;
        },
        clearAttr() {
            this.form.attrs_name = '';
            this.form.attrs_val = '';
        },
        // 删除规格
        handleRemoveRole(index) {
            this.rule_attrs.splice(index, 1);
            this.manyFormValidate.splice(index, 1);
        },
        // 删除属性
        handleRemove2(item, index) {
            item.splice(index, 1);
        },
        // 添加规则名称
        createAttrName() {
            if (this.form.attrs_name && this.form.attrs_val) {
                let data = {
                    value: this.form.attrs_name,
                    detail: [this.form.attrs_val],
                };
                this.rule_attrs.push(data);
                var hash = {};
                this.rule_attrs = this.rule_attrs.reduce(function (item, next) {
                    /* eslint-disable */
                    hash[next.value] ? '' : (hash[next.value] = true && item.push(next));
                    return item;
                }, []);
                this.clearAttr();
                this.showIput = false;
                this.createBnt = true;
            } else {
                this.$message.warning('请添加完整的规格！');
            }
        },
        // 添加属性
        createAttr(num, idx) {
            if (num) {
                this.rule_attrs[idx].detail.push(num);
                var hash = {};
                this.rule_attrs[idx].detail = this.rule_attrs[idx].detail.reduce(function (item, next) {
                    /* eslint-disable */
                    hash[next] ? '' : (hash[next] = true && item.push(next));
                    return item;
                }, []);
            } else {
                this.$message.warning('请添加属性');
            }
        },
        checkMove(evt) {
            this.moveIndex = evt.draggedContext.index;
        },
        end() {
            this.moveIndex = '';
            this.generate(1);
        },
        generate(){

           let rule_attrs = this.rule_attrs
            let titleMap = [];
            let preList = [];
            rule_attrs.forEach((item, index) => {
                let data = item.item.filter(function (s) {
                    return s && s.trim();
                })
                if (item.rule_name != '' && data.length > 0) {
                    titleMap.push({label: item.rule_name, property: index})
                    preList.push(item.item)
                }
            })

            console.log("preList",preList)
        },
        // 商品详情
        getEditorContent(data) {
            this.goods_contents = data;
        },
/*----------------------------------*/
        // 移除参数
        rmAttr(index) {
            this.attr_table.splice(index, 1)
        },
        // 添加参数
        addAttr() {
            this.attr_table.push({
                item: '',
                value: ''
            });
        },
        // 删除属性
        handleDel(index) {
            this.rule_extend.splice(index, 1)
        },

        // 过滤空值
        trimSpace(array) {
            for (let i = 0; i < array.length; i++) {
                let item = array[i].item
                array[i].item = item.filter((s) => {
                    return s && s.trim()
                });
            }
            return array;
        },

    }
}
</script>

<style lang="scss" scoped>
img {
    width: 100%;
}

.edit-input {
    padding-right: 100px;
}

.cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
}

.el-tabs__item {
    font-weight: 400;
}
.img-list {
    height: 60px;
    padding-left: 0;
    margin-top: 0;
}

.img-list li:first-child {
    margin-left: 0;
}

.img-list li {
    width: 58px;
    height: 58px;
    float: left;
    margin-left: 5px;
    cursor: pointer;
    position: relative;
}

.img-list li .img-tools {
    position: absolute;
    width: 58px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    top: 43px;
    background: rgba(0, 0, 0, 0.6);
}



.addImg {
    height: 56px;
    width: 56px;
    line-height: 56px;
    text-align: center;
    border: 1px dashed rgb(221, 221, 221)
}
.image-check-dialog .el-dialog__header {
    display: none
}

.image-check-dialog .el-dialog__body {
    padding: 0;
}

.is-uploading {
    width: 150px !important
}

.is-success {
    width: 150px !important
}

.del-btn {
    cursor: pointer;
    color: #F56C6C
}

.add-btn {
    cursor: pointer;
    margin-top: 18px;
    color: #409EFF
}

.up-item-img {
    width: 50px;
    height: 50px;
    border: 1px dashed #c2c2c2;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}

.cell .img-tools {
    position: absolute;
    width: 50px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    top: 43px;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.ifam {
    width: 344px;
    height: 644px;
    background: url('../../../../assets/images/phonebg.png') no-repeat center top;
    background-size: 344px 644px;
    padding: 40px 20px;
    padding-top: 50px;
    margin: 0 auto;

    .content {
        height: 560px;
        overflow: hidden;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .content::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
}

</style>
